<template>
  <!-- 气象监测 -->
  <div class="Project-box meteoroMonitoring-box">
    <div class="meteoroTitle1 publicTiTle">气象监测</div>
    <div class="meteoroTitle2 publicTiTle">墒情监测</div>
    <div class="meteoroTitle3 publicETiTle">土地墒情变化趋势</div>
    <div class="meteoroRing-box1">
      <div class="Ring-boxT publicTime">更新时间: 2025-02-27</div>
      <div class="Ring-boxB">
        <div class="Ring-boxI Image1">
          <div class="ItemTop">00<span>m/s</span></div>
          <div class="ItemBom">当前风速</div>
        </div>
        <div class="Ring-boxI Image2">
          <div class="ItemTop">S 29<span>°</span></div>
          <div class="ItemBom">当前风向</div>
        </div>
        <div class="Ring-boxI Image3">
          <div class="ItemTop">35<span>%</span></div>
          <div class="ItemBom">空气湿度</div>
        </div>
        <div class="Ring-boxI Image4">
          <div class="ItemTop">100.9<span>kpa</span></div>
          <div class="ItemBom">大气压强</div>
        </div>
        <div class="Ring-boxI Image5">
          <div class="ItemTop">13.8<span>℃</span></div>
          <div class="ItemBom">空气温度</div>
        </div>
        <div class="Ring-boxI Image6">
          <div class="ItemTop">0.0<span>mm</span></div>
          <div class="ItemBom">日降雨量</div>
        </div>
      </div>
    </div>
    <div class="meteoroRing-box2 publicTime">更新时间: 2025-02-27</div>
    <div class="meteoroRing-box3">
      <div class="Box3-item">
        <div class="I1" style="color: #51fff0">土壤湿度</div>
        <div class="I2">35<span>%RH</span></div>
      </div>
      <div class="Box3-item">
        <div class="I1-1" style="color: #ffab41">土壤温度</div>
        <div class="I2">18.3<span>℃</span></div>
      </div>
      <div class="Box3-item">
        <div class="I1" style="color: #ffeb51">土壤盐度</div>
        <div class="I2">0.18<span>%RH</span></div>
      </div>
      <div class="Box3-item">
        <div class="I1-1" style="color: #55dbff">土壤PH</div>
        <div class="I2">7.1<span></span></div>
      </div>
    </div>
    <div class="meteoroRing-box4">
      <div class="Xliala1">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
      <div class="Xliala2">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
    </div>
    <div class="meteoroRing-box5">
      <barChartEcharts :barChartList="barChartList" />
    </div>
  </div>
</template>
<script setup>
import Xialakuang from "@/components/xialakuang.vue"
import barChartEcharts from "@/components/barChartEcharts.vue"

const barChartList = ref({
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    湿度: [10, 20, 30, 40, 50, 60]
  },
  grid: {
    top: 30,
    left: 10,
    right: 10,
    bottom: 10,
    containLabel: true
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    湿度: ["rgba(49, 231, 203,.1)", "rgba(49, 231, 203)"]
  },
  danwei: "单位:%",
  isShowlegend: false, // 判断需不需要展示图例的布尔值
  isShowSlabel: true, //是否展示Label
  yinying: true //是否添加阴影
})
const xialaList = ref([
  {
    name: "全部",
    id: 1
  },
  {
    name: "一年级",
    id: 2
  },
  {
    name: "二年级",
    id: 3
  },
  {
    name: "三年级",
    id: 4
  },
  {
    name: "四年级",
    id: 5
  },
  {
    name: "五年级",
    id: 6
  }
])

const belowEmits = (e) => {
  console.log(e)
}
</script>
<style scoped lang="less">
.meteoroMonitoring-box {
  background: url("@/assets/FourMonitoring/XXC_SQJC_1@2x.png") no-repeat center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .meteoroTitle1 {
    position: absolute;
    left: 30px;
    top: 2px;
  }
  .meteoroTitle2 {
    position: absolute;
    left: 30px;
    top: 312px;
  }
  .meteoroTitle3 {
    position: absolute;
    left: 10px;
    top: 550px;
  }
  .meteoroRing-box1 {
    width: 100%;
    height: 260px;
    position: absolute;
    top: 35px;
    .Ring-boxT {
      width: 100%;
      height: 20px;
      line-height: 40px;
      padding-left: 10px;
    }
    .Ring-boxB {
      width: 100%;
      height: 240px;
      // background-color: red;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      .Ring-boxI {
        width: 176px;
        height: 75px;
        position: relative;
        .ItemTop {
          position: absolute;
          left: 83px;
          top: 20px;
          font-size: 20px;
          color: #fff;
          span {
            font-size: 14px;
          }
        }
        .ItemBom {
          position: absolute;
          left: 83px;
          top: 45px;
          font-size: 12px;
          color: #fff;
        }
      }
      .Image1 {
        background: url("@/assets/FourMonitoring/BJ_DQFS@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .Image2 {
        background: url("@/assets/FourMonitoring/BJ_DQFX@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .Image4 {
        background: url("@/assets/FourMonitoring/BJ_DQYQ@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .Image3 {
        background: url("@/assets/FourMonitoring/BJ_KQSD@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .Image5 {
        background: url("@/assets/FourMonitoring/BJ_KQWD@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .Image6 {
        background: url("@/assets/FourMonitoring/BJ_RJYL@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
    }
  }
  .meteoroRing-box2 {
    width: 100%;
    height: 20px;
    position: absolute;
    top: 357px;
    padding-left: 10px;
    // background-color: red;
  }
  .meteoroRing-box3 {
    width: 377px;
    height: 150px;
    position: absolute;
    top: 385px;
    left: 10px;
    background: url("@/assets/FourMonitoring/BJ_TRSJ@2x.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
    .Box3-item {
      width: 50%;
      height: 50%;
      .I1 {
        width: 100%;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        margin-left: 35px;
      }
      .I1-1 {
        width: 100%;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        margin-left: 95px;
      }
      .I2 {
        width: 100%;
        height: 29px;
        line-height: 29px;
        margin-top: 10px;
        font-size: 20px;
        text-align: center;
        color: #fff;
        span {
          font-size: 14px;
        }
      }
    }
    .Box3-item:nth-child(2n) {
      width: 50%;
      height: 51.5%;
      .I1 {
        width: 100%;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        margin-left: 35px;
      }
      .I1-1 {
        width: 100%;
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        margin-left: 95px;
      }
      .I2 {
        width: 100%;
        height: 29px;
        line-height: 29px;
        margin-top: 10px;
        font-size: 20px;
        text-align: center;
        color: #fff;
        span {
          font-size: 14px;
        }
      }
    }
  }
  .meteoroRing-box4 {
    width: 100%;
    height: 32px;
    position: absolute;
    top: 580px;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;
    .Xliala1 {
      width: 112px;
      height: 32px;
    }
    .Xliala2 {
      margin-left: 20px;
      width: 137px;
      height: 32px;
    }
  }
  .meteoroRing-box5 {
    width: 100%;
    height: 330px;
    position: absolute;
    top: 625px;
    // background-color: pink;
  }
}
</style>
